<template>
  <view class="flex mb-[20rpx] flex-1" @click="emit('click')">
    <wd-img
      :width="imageWidth"
      :height="imageHeight"
      :src="data[imageKey]"
      mode="aspectFill"
    ></wd-img>

    <view class="text-base ml-3 flex-1 flex flex-col">
      <view class="line-clamp-1 text-[30rpx] mb-2">{{ data[nameKey] }}</view>
      <view class="text-xs text-[#9A9A9A] mb-3 line-clamp-1" v-if="data.content">
        <uv-parse :nodes="filterMediaTag(data.content)"></uv-parse>
      </view>
      <view class="text-md flex justify-between">
        <slot name="price">
          <text>￥{{ data[priceKey] }}</text>
        </slot>
        <view class="text-[#9A9A9A] text-xs flex items-center" v-if="showSales">
          <i class="w-[6rpx] h-[6rpx] rounded-1/2 bg-[#9A9A9A] mr-1"></i>
          <text>已售{{ data.sales_num }}</text>
        </view>
      </view>
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
import { filterMediaTag } from '@/utils/format'
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  imageKey: {
    type: String,
    default: 'image',
  },
  nameKey: {
    type: String,
    default: 'name',
  },
  priceKey: {
    type: String,
    default: 'sell_price',
  },
  imageWidth: {
    type: String,
    default: '210rpx',
  },
  imageHeight: {
    type: String,
    default: '210rpx',
  },
  showSales: {
    type: Boolean,
    default: true,
  },
})
const emit = defineEmits(['click'])
</script>

<style lang="scss" scoped></style>
